.appContent {
  width: 100%;
  height: 100vh;
  background-image: url("@/assets/practice-images/bground.png");
  background-size: 100% 100%;
  position: relative;

  .practiceHeader {
    display: flex;
    height: 10%;
    justify-content: center;

    .title {
      color: #0ccff1;
      position: absolute;
      top: 4%;
      font-size: calc(12px + 2vmin);
    }

    :global {
      .ant-btn {
        position: absolute;
        left: 10px;
        top: 10px;
        background-color: #002b77 !important;
      }
    }
  }

  .centerContent {
    width: 90%;
    height: 65%;
    max-height: 73%;
    margin: 0 auto;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: 20%;
    justify-content: center;

    .box {
      width: 28%;
      margin-left: 60px;
      height: 35%;
      background-image: url("@/assets/practice-images/centerMode.png");
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .images {
        width: 95%;
        height: 95%;
        background-color: #000;

        font-size: calc(12px + 2vmin);

        a {
          display: flex;
          width: 100%;
          height: 100%;
          align-items: center;
          justify-content: center;
        }
      }

      .images:hover {
        cursor: pointer;
      }
    }
  }

  .practiceBottom {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 3%;

    .leftArrow,
    .rightArrow {
      width: 52px;
      height: 52px;
      background-image: url("@/assets/practice-images/arrow.png");
      background-size: 100% 100%;
      cursor: pointer;
      position: absolute;
    }

    .begining {
      width: 298px;
      height: 104px;
      background-image: url("@/assets/practice-images/begin.png");
      background-size: 100% 100%;
      cursor: pointer;
    }

    .leftArrow {
      transform: rotate(180deg);
      left: 29%;
      bottom: 13%;
    }

    .rightArrow {
      right: 29%;
      bottom: 13%;
    }
  }
}
